<template>
	<view class="contain-body">
		<!-- <me-tabs v-model="tabIndex" :tabs="tabs" :tab-width="130"></me-tabs> -->
		<scroll-view class=" nav" scroll-with-animation scroll-x>
			<view class="cu-item tab" :class="0 == TabCur ? 'text-blue cur' : ''" :key="0" @tap="tabSelect"
				:data-id="0">
				全部
			</view>
			<view class="cu-item tab" :class="1 == TabCur ? 'text-blue cur' : ''" :key="1" @tap="tabSelect"
				:data-id="1">待付款
				<u-badge class="tab-badge" type="error" max="99" :value="tabBadges.pendingExecute"></u-badge>
			</view>
			<view class="cu-item tab" :class="2 == TabCur ? 'text-blue cur' : ''" :key="2" @tap="tabSelect"
				:data-id="2">
				待审核
			</view>
			<view class="cu-item tab" :class="3 == TabCur ? 'text-blue cur' : ''" :key="3" @tap="tabSelect"
				:data-id="3">
				待发货

			</view>
			<view class="cu-item tab" :class="3 == TabCur ? 'text-blue cur' : ''" :key="4" @tap="tabSelect"
				:data-id="3">
				待收货

			</view>
			<view class="cu-item tab" :class="3 == TabCur ? 'text-blue cur' : ''" :key="5" @tap="tabSelect"
				:data-id="3">
				待完结
			</view>
			<view class="cu-item tab" :class="3 == TabCur ? 'text-blue cur' : ''" :key="3" @tap="tabSelect"
				:data-id="3">
				已完成
			</view>
			<view class="cu-item tab" :class="3 == TabCur ? 'text-blue cur' : ''" :key="3" @tap="tabSelect"
				:data-id="3">
				已逾期
			</view>
			<view class="cu-item tab" :class="3 == TabCur ? 'text-blue cur' : ''" :key="3" @tap="tabSelect"
				:data-id="3">
				申请取消
			</view>
			<view class="cu-item tab" :class="3 == TabCur ? 'text-blue cur' : ''" :key="3" @tap="tabSelect"
				:data-id="3">
				退款中
			</view>

		</scroll-view>
		<view class="content-box">
			<view class="list-card" v-for="(item,index) in cardList" @click="showDetails(item,index)">
				<view class="flexrow numberRow">
					<view class="">
						订单编号：{{item.oddNumbers}}
					</view>
					<view class="type">
						<text v-if="item.state === '待付款'" class="redTxt">{{item.state}}</text>
						<text v-if="item.state === '待发货'" class="redTxt2">{{item.state}}</text>
					</view>
				</view>
				<view class="flexrow bottomFlex">
					<image :src="item.url" mode="" class="shopimg"></image>
					<view class="flexCloum rightCont">
						<text class="nameTxt">{{item.name}}</text>
						<text class="titleTxt">规格：分期产品{{item.title}}</text>
						<view class="flexrow be">
							<text class="priceTxt">￥{{item.price}}</text>
							<text>x{{item.number}}</text>
						</view>
						<view class="flexrow be margin5">
							<text class=" ">分期{{item.month}}月</text>
							<text class=" ">月供￥{{item.money}}</text>
						</view>
					</view>
				</view>
				<view class="shoufu">
					含运费&emsp;
					<text class="">首期金额</text>
					<text class="">￥</text>
					<text class="">{{item.TotalPrice}}</text>
				</view>
				<view class="shoufu margin5">
					<button class="selectProvide" @click="MyJoin">取消订单</button>
					<button class="selectProvide" @click="MyJoin">修改信息</button>
					<button class="selectProvide  color-orang" @click="MyJoin">免押支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MeTabs from "@/components/me-tabs/me-tabs.vue";
	export default {
		data() {
			return {
				TabCur: 0,
				tabIndex: 0, // 当前tab的下标
				tabs: [{
					name: '支出'
				}, {
					name: '收入'
				}, ],
				cardList: [{
						oddNumbers: 6540123987136922,
						state: '待付款',
						url: '/static/iphone15.png',
						name: 'iphone最新款',
						title: '粉色 512G',
						price: '8400',
						number: 1,
						month: 12,
						money: 1160.5,
						TotalPrice: '1000'
					},
					{
						oddNumbers: 6540123987136922,
						state: '待发货',
						url: '/static/iphone15.png',
						name: 'iphone最新款',
						title: '粉色 512G',
						price: '8400',
						number: 1,
						month: 12,
						money: 1160.5,
						TotalPrice: '1000'
					},
					{
						oddNumbers: 6540123987136922,
						state: '待发货',
						url: '/static/iphone15.png',
						name: 'iphone最新款',
						title: '粉色 512G',
						price: '8400',
						number: 1,
						month: 12,
						money: 1160.5,
						TotalPrice: '1000'
					}
				]
			};
		},
		methods: {
			tabSelect(e) {
				console.log(e);
				this.TabCur = e.currentTarget.dataset.id;
			},
			showDetails(item){
				// console.log('item点击跳转',item);
				uni.navigateTo({
					url: "/pages/mine/order-List/order-details"
				})
				 
			}
		}
	}
</script>

<style lang="scss">
	.content-box {
		width: 100%;
		background-color: #f5f5f5;
		padding: 10px;
		box-sizing: border-box;
	}

	.list-card {
		width: 100%;
		border-radius: 5px;
		background-color: #fff;
		color: #959595;
		font-size: 12px;
		margin-bottom: 10px;
	}

	.selectProvide {
		font-size: 14px;
		border-radius: 30px !important;
		height: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333;
		border: 1px solid #c6c6c6 !important;
		margin-right: 0px !important;
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 10px;
		background-color: #fff !important;
	}

	.color-orang {
		color: #FF8B07 !important;
		border-color: #FF8B07 !important;
	}

	.flexrow {
		display: flex;
		align-items: center;
	}

	.flexCloum {
		display: flex;
		flex-direction: column;
	}

	.shopimg {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		border: 1px solid #e8e8e8;
		border-radius: 5px;
	}

	button::after {
		border: none;
	}

	.shoufu {
		justify-content: flex-end;
		padding: 0 10px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.rightCont {
		width: calc(100% - 110px);
	}

	.numberRow {
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #e8e8e8;
	}

	.redTxt {
		color: red;
		font-weight: bold;
	}

	.redTxt2 {
		color: #FF8B07;
		font-weight: bold;
	}

	.bottomFlex {
		padding: 10px;
		box-sizing: border-box;
	}

	.nameTxt {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		display: block;
	}

	.priceTxt {
		font-size: 14px;
		font-weight: bold;
		color: #333;
	}

	.be {
		justify-content: space-between;
	}

	.margin5 {
		margin-top: 5px;
	}

	.titleTxt {
		font-size: 12px;
		color: #696969;
		display: block;
		margin-bottom: 15px;
		margin-top: 5px;
	}

	.nav .cu-item {
		width: 10%;
		text-align: center;
		position: relative;
		height: 45px;
		display: inline-block;
		line-height: 45px;
		margin: 0 5px;
		padding: 0 10px;
	}

	.nav .cu-item.cu {
		border-bottom: 2px solid;
	}

	.nav {
		background-color: #fff;
		white-space: nowrap;
	}

	.text-blue {
		color: #FF8B07;
		border-bottom: 2px solid;
	}
</style>
